<template>

    <div class="show-pc PageWidth" style=" background-color: var(--color-bg);">
        <div>
            <dropDown></dropDown>
        </div>
        <div class="WaterfallFlow_item">
            <Waterfall :col="3" :data-source="list" @toDetail="handleTodetails" />
        </div>

    </div>
    <div class="show-wap">
        <div class="Pinned-wap">

            <div class="content-wap">
                <div class="leftbox-wap">
                    <sshbImage :width="1400" :height="800" :src="Swiper_1_img" style="border-radius: 4px;" preview>
                    </sshbImage>
                </div>
                <div class="rightbox-container-wap">
                    <div class="rightbox-wap">
                        <!-- <div v-for="item in imgList" class="slide-item-wap">
                            <sshbImage :width="400" :height="800" :src="item.imgurl" style="border-radius: 4px;"
                                preview>
                            </sshbImage>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
        <div>
            <ImageCard />
        </div>

    </div>





</template>

<script setup>
import { useRouter } from 'vue-router';
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper/modules'
import 'swiper/swiper-bundle.css'
import 'swiper/css'
import 'swiper/css/autoplay'
import ImageCard from './ImageCard.vue'
import dropDown from './dropDown.vue'
import weixin_code from '../assets/images/weixin_code.png'
import sshbImage from '@/sshbComponents/sshbImage/index.vue';
import Swiper_1_img from "../../assets/images/local_img/Swiper.png"
import imgurl_2 from "../../assets/images/local_img/swiper_2.png"
import imgurl_3 from "../../assets/images/local_img/swiper_3.png"
import imgurl_4 from "../../assets/images/local_img/swiper_4.png"

// 瀑布流数据
import img_1 from "../../assets/images/local_img/img_1.png"
import img_2 from "../../assets/images/local_img/img_2.png"
import img_3 from "../../assets/images/local_img/img_3.png"
import img_4 from "../../assets/images/local_img/img_4.png"
import img_5 from "../../assets/images/local_img/img_5.png"
import img_6 from "../../assets/images/local_img/img_6.png"
import img_7 from "../../assets/images/local_img/img_7.png"
import img_8 from "../../assets/images/local_img/img_8.png"
import img_9 from "../../assets/images/local_img/img_9.png"
import img_10 from "../../assets/images/local_img/img_10.png"


// 注册 Autoplay 模块
const modules = [Autoplay]
const router = useRouter();

const swiperImages = ({
    1: imgurl_2,
    2: imgurl_3,
    3: imgurl_4,

})




const imgList = ref([
    {
        id: 0,
        imgurl: 1

    },
    {
        id: 1,
        imgurl: 2,
    },
    {
        id: 2,
        imgurl: 3

    }
])



const list = ref([
    {
        imgurl: img_8,
        text: "图片4",
        name: "作家"
    }, {
        imgurl: img_10,
        text: "图片5",
        name: "作家"
    }, {
        imgurl: img_6,
        text: "图片2",
        name: "作家"
    },
    {
        imgurl: img_3,
        text: "图片5",
        name: "作家"
    },
    {
        imgurl: img_8,
        text: "图片4",
        name: "作家"
    }, {
        imgurl: img_10,
        text: "图片5",
        name: "作家"
    },
    {
        imgurl: img_2,
        text: "档期活动物料",
        name: "作家sss"
    }, {
        imgurl: img_5,
        text: "图片2",
        name: "作家"
    }, {
        imgurl: img_7,
        text: "图片3",
        name: "作家"
    }, {
        imgurl: img_9,
        text: "图片3",
        name: "作家"
    }, {
        imgurl: img_10,
        text: "图片4",
        name: "作家"
    }, {
        imgurl: img_1,
        text: "图片5",
        name: "作家"
    }, {
        imgurl: img_2,
        text: "图片2",
        name: "作家"
    }, {
        imgurl: img_4,
        text: "图片3",
        name: "作家"
    }, {
        imgurl: img_8,
        text: "图片4",
        name: "作家"
    }, {
        imgurl: img_6,
        text: "图片2",
        name: "作家"
    }, {
        imgurl: img_9,
        text: "图片3",
        name: "作家"
    },
])




const handleTodetails = ({ index }) => {
    router.push(`/details/${1}`)

}




</script>

<style lang="less" scoped>
.WaterfallFlow_item {
    .masonry-container {
        padding: 0px !important;

    }


}
</style>
